<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style lang="">
        *{
            margin: 0;
            padding: 0;
            text-align: center;
        }
        div.wrap{
            width: 900px;
            height: 400px;
            margin: 30px auto;
            border: 1px solid salmon;
        }
        table{
            width:100%;
            table-layout:fixed;
            overflow: hidden;
            height: 100%;
            text-overflow:ellipsis;white-space:nowrap;
        }
        .box1{
            width:100%;
            background: #cbe4c4;
            height: 100%;
        }
        .box2{
            width:1000px;
            background: #6eaf5b;
            height: 100%;
        }
    </style>
</head>
<body>
    <img src="https://biangene.oss-cn-shenzhen.aliyuncs.com/mtxform/1162_2.png?tt=20180104155759" alt="">
    <div class="wrap">

        <table>
            <tr>
                <td style="width:100%;">
                    <div class="box1">
                        <div class="box2"><input type="tel"><input type="number"></div>
                    </div>
                </td>
               
            </tr>
        </table>
    </div>
    <div class="wrap" style="height: auto;">
            <svg x="0px" y="0px" width="450px" height="100px" viewBox="0 0 450 100"> <rect x="10" y="5" fill="white" stroke="black" width="90" height="90"/> <circle fill="white" stroke="black" cx="170" cy="50" r="45"/> <polygon fill="white" stroke="black" points="279,5 294,35 328,40 303,62 309,94 279,79 258,94 254,62 230,39 263,35"/> <line fill="none" stroke="black" x1="410" y1="95" x2="440" y2="6"/> <line fill="none" stroke="black" x1="360" y1="6" x2="360" y2="95"/> </svg>
            <svg width="500" height="200" viewBox="0 0 50 20" > <rect x="20" y="10" width="10" height="5" style="stroke: #000000; fill:none;"/> </svg>
            <svg width="400" height="200" viewBox="0 0 200 200" preserveAspectRatio="xMinYMin slice" style="border:1px solid #cd0000;"> <rect x="10" y="10" width="150" height="150" fill="#cd0000"/> </svg>
            <svg width="180" height="200"
  xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink">

  <!-- This is the element before translation and rotation are applied -->
  <rect x="50" y="50" height="100" width="100" style="stroke:#000; fill: #0086B2" fill-opacity=0.2 stroke-opacity=0.2></rect>

  <!-- Now we add a text element and apply rotate and translate to both -->
  <rect x="50" y="50" height="100" width="100" style="stroke:#000; fill: #0086B2" transform="translate(30) rotate(45 50 50)"></rect>
  <text x="60" y="105" transform="translate(30) rotate(45 50 50)"> Hello Moz! </text>

</svg>
    </div>
</body>
</html>